'use client'

import { useEffect } from 'react'

export default function ApiDocs() {
  useEffect(() => {
    // 动态加载 Swagger UI CSS 和 JS
    const swaggerCss = document.createElement('link')
    swaggerCss.rel = 'stylesheet'
    swaggerCss.href = 'https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui.css'
    document.head.appendChild(swaggerCss)

    const swaggerJs = document.createElement('script')
    swaggerJs.src = 'https://unpkg.com/swagger-ui-dist@5.11.0/swagger-ui-bundle.js'
    document.body.appendChild(swaggerJs)

    swaggerJs.onload = () => {
      // @ts-ignore
      window.ui = SwaggerUIBundle({
        url: '/api/docs',
        dom_id: '#swagger-ui',
      })
    }

    return () => {
      document.head.removeChild(swaggerCss)
      document.body.removeChild(swaggerJs)
    }
  }, [])

  return <div id="swagger-ui" style={{ backgroundColor: '#ffffff', width: '100%', height: '100%' }} />
} 